<template>
	<view class="charts-box">
		<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
	export default {
		// 1. 新增 props：接收数据类型标识（区分是收入还是订单）
		props: {
			// 接收原始数据（incomesData 或 ordersData）
			columnData: {
				type: Array,
				default: () => []
			},
			// 接收数据类型：'income' 表示收入数据，'order' 表示订单数据
			dataType: {
				type: String,
				required: true, // 必传，确保父组件明确数据类型
				validator: (value) => {
					// 限制只能传 'income' 或 'order'，避免错误值
					return ['income', 'order'].includes(value);
				}
			}
		},
		data() {
			return {
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						show: true
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			};
		},
		watch: {
			// 监听数据或类型变化，都重新更新图表
			columnData(newVal) {
				this.updateChartData(newVal);
			},
			dataType() {
				this.updateChartData(this.columnData);
			}
		},
		mounted() {
			if (this.columnData.length > 0) {
				this.updateChartData(this.columnData);
			}
		},
		methods: {
			updateChartData(data) {
				let categories = data.map(item => item.text);
				// 2. 根据 dataType 动态设置系列名称
				let seriesName = this.dataType === 'income' ? '收入 / ￥' : '数量 / 个';

				let series = [{
					name: seriesName, // 动态名称生效
					data: data.map(item => item.value)
				}];

				let res = {
					categories,
					series
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			}
		}
	};
</script>

<style scoped>
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>